<%@ page
	language="java"
	contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
/*
input[type=range] {
	-webkit-appearance: none;
	margin: 18px 0;
	width: 100%;
}

input[type=range]:focus {
	outline: none;
}

input[type=range]::-webkit-slider-runnable-track {
	width: 100%;
	height: 8.4px;
	cursor: pointer;
	animate: 0.2s;
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	background: #3071a9;
	border-radius: 1.3px;
	border: 0.2px solid #010101;
}

input[type=range]::-webkit-slider-thumb {
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	border: 1px solid #000000;
	height: 36px;
	width: 16px;
	border-radius: 3px;
	background: #ffffff;
	cursor: pointer;
	-webkit-appearance: none;
	margin-top: -14px;
}

input[type=range]:focus::-webkit-slider-runnable-track {
	background: #367ebd;
}

input[type=range]::-moz-range-track {
	width: 100%;
	height: 8.4px;
	cursor: pointer;
	animate: 0.2s;
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	background: #3071a9;
	border-radius: 1.3px;
	border: 0.2px solid #010101;
}

input[type=range]::-moz-range-thumb {
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	border: 1px solid #000000;
	height: 36px;
	width: 16px;
	border-radius: 3px;
	background: #ffffff;
	cursor: pointer;
}

input[type=range]::-ms-track {
	width: 100%;
	height: 8.4px;
	cursor: pointer;
	animate: 0.2s;
	background: transparent;
	border-color: transparent;
	border-width: 16px 0;
	color: transparent;
}

input[type=range]::-ms-fill-lower {
	background: #2a6495;
	border: 0.2px solid #010101;
	border-radius: 2.6px;
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-fill-upper {
	background: #3071a9;
	border: 0.2px solid #010101;
	border-radius: 2.6px;
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
}

input[type=range]::-ms-thumb {
	box-shadow: 1px 1px 1px #000000, 0px 0px 1px #0d0d0d;
	border: 1px solid #000000;
	height: 36px;
	width: 16px;
	border-radius: 3px;
	background: #ffffff;
	cursor: pointer;
}

input[type=range]:focus::-ms-fill-lower {
	background: #3071a9;
}

input[type=range]:focus::-ms-fill-upper {
	background: #367ebd;
}
*/
</style>
<script type="text/javascript">
  function blink() {
    var blinks = document.getElementsByTagName('blink');
    for (var i = blinks.length - 1; i >= 0; i--) {
      var s = blinks[i];
      s.style.visibility = (s.style.visibility === 'visible') ? 'hidden' : 'visible';
    }
    window.setTimeout(blink, 1000);
  }
  if (document.addEventListener) document.addEventListener("DOMContentLoaded", blink, false);
  else if (window.addEventListener) window.addEventListener("load", blink, false);
  else if (window.attachEvent) window.attachEvent("onload", blink);
  else window.onload = blink;
</script>

</head>
<body>
<BLINK>BLINK</BLINK>
<blink>Text to blink here</blink>
	<div
		data-role="page"
		data-theme="b">

		<div
			data-role="header"
			class="ui-bar-a ui-header"
			role="banner">
			<a
				id="backButton"
				href="/index.html"
				data-icon="arrow-l"
				data-theme="a">Back</a>
			<h1
				class="ui-title"
				tabindex="0"
				role="heading"
				aria-level="1">Form Elements</h1>
		</div>

		<div data-role="content">
			<h2>Slider</h2>

			<div data-role="fieldcontain">
				<label for="slider-1">Continuous slider:</label> <input
					type="range"
					name="slider-1"
					id="slider-1"
					value="50"
					min="0"
					max="100" />
			</div>

			<div data-role="fieldcontain">
				<label for="slider-2">Continuous slider:</label> <input
					type="range"
					name="slider-2"
					id="slider-2"
					value="0"
					min="-10"
					max="10" />
			</div>

			<div data-role="fieldcontain">
				<label for="slider-3">Segmented slider:</label> <input
					type="range"
					name="slider-3"
					id="slider-3"
					value="0"
					min="0"
					max="10"
					step="1" />
			</div>

			<div data-role="fieldcontain">
				<label for="slider-4">Segmented slider (Negation):</label> <input
					type="range"
					name="slider-4"
					id="slider-4"
					value="0"
					min="-10"
					max="10"
					step="2" />
			</div>
		</div>

	</div>
	<fieldset>
		<legend>Lex Luthor’s Earthquake Machine</legend>
		<label for=richter>Richter Scale</label> <input
			type=range
			min=0
			max=10
			value=0
			id=richter
			step=1
			list=richterscale>
		<datalist id=richterscale>
			<option style="color:#FF0000">0000</option>
			<option>1</option>
			<option>2</option>
			<option>3</option>
			<option>4</option>
			<option>5</option>
			<option>6</option>
			<option>7</option>
			<option>8</option>
			<option>9</option>
			<option>10</option>
		</datalist>
	</fieldset>
	<select>
	<option style="border: 1px solid #000000">#000000</option>
	<option></option>
	<option></option>
	<option></option>
	</select>
<body>

</body>
</html>

